<template>
    <GetTableHeight v-slot="{height}">
        <el-table :highlight-current-row="false" v-bind="$attrs" :data="data" border style="width: 100%" :max-height="height" row-key="_id" :row-class-name="tableRowClassName">
            <el-table-column type="index" label="序号" min-width="60" align="center" />
            <el-table-column type="selection" width="55" align="center"/>
            <template v-for="item in column">
                <el-table-column show-overflow-tooltip :label="item.label" align="center" :min-width="item.minWidth"
                    :width="item.wdith">
                    <template #default="scope">
                        <template v-if="!item.slot">
                            {{ item.filter ? item.filter(scope.row[item.prop]) : scope.row[item.prop] }}
                        </template>
                        <slot v-else :name="item.prop" :row="scope.row"></slot>
                    </template>
                </el-table-column>
            </template>
            <el-table-column fixed="right" align="center" min-width="240px" label="操作">
                <!-- 操作 -->
                <template #default="scope">
                    <slot name="default" :row="scope.row"></slot>
                </template>
            </el-table-column>
        </el-table>
    </GetTableHeight>
</template>

<script lang='ts' setup>
import { Table } from "@/types/table"
import GetTableHeight from "@/components/GetTableHeight/index.vue"

interface TableProps {
    data: any[],
    column: Table.Column[]
}
defineProps<TableProps>()
// 根据用户状态动态改变当前行的样式
const tableRowClassName = ({ row, rowIndex, }: { row: any, rowIndex: number }) => {
    if (!row.status && row.status !== undefined) {
        return "warning-row tablerow"
    }
    return "tablerow"
}
</script>

<style scoped></style>